import React, { Component } from 'react';
import { Button, Form, message } from 'antd';
import { messages } from 'share/common';
import CustomReportService from 'containers/data-center/report-management/custom-report/custom-report.service';
import SingleFieldComp from 'containers/data-center/report-management/single-field-comp';
import InputLanguage from 'components/template/input-language';
const FormItem = Form.Item;

@Form.create()

class OtherSourceDataManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        i18n: {},
        reportColumnDTOList: []
      },
      loading: false,
    };
  }

  componentWillMount() {

  }

  componentDidMount() {
    const { params } = this.props;
    if (params.id && params.id !== 'new') {
      this.setState({loading: true})
      CustomReportService.getSingleOtherDataDetail({reportId: params.id}).then((res)=>{
        if (res.status === 200) {
          this.setState({data: res.data, loading: false})
        }
      }).catch(()=>{this.setState({loading: false})})
    } else {
      const { data } = this.state;
      data.reportColumnDTOList.push({
        uniqueId: 99999, i18n: {columnDisplayName: []}, columnDisplayName: undefined, dataType: undefined
      })
      this.setState({data})
    }
  }

  componentWillUnmount() {

  }

  saveAll = (e) => {
    e.preventDefault();
    const { data } = this.state;
    let isNew = !!data.id;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (this.SingleFieldCompRef.validateFields()) {
          this.setState({loading: true})
          data.reportName = values.reportName.name;
          data.reportDesc = values.reportDesc.name;
          data.i18n['reportName'] = values.reportName.i18n;
          data.i18n['reportDesc'] = values.reportDesc.i18n;
          data.reportColumnDTOList = values.reportColumnDTOList;
          CustomReportService.newOrUpdateOtherData(data).then((res)=>{
            if (res.status === 200) {
              this.setState({loading: false})
              message.success(isNew ? messages('basic-10.key107')/*保存成功*/ : messages('basic-10.key237')/*新建成功*/);
              this.props.close({needRefresh: true, key: 'other'});
            } else {this.setState({loading: false})}
          }).catch(()=>{this.setState({loading: false})})
        }
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading, data } = this.state;

    return (
      <div className='other-source-data-manage'>
        <Form className='new-form' onSubmit={this.saveAll}>
          <FormItem required label={messages('basic-10.key205')/*数据源名称*/}>
            {getFieldDecorator('reportName', {
              rules: [InputLanguage.required],
              initialValue: { name: data.reportName, i18n: data.i18n ? data.i18n.reportName : [] }
            })(
              <InputLanguage
                placeholder={messages('common.max.characters.length',{arg1: 50})/*最多输入{arg1}个字符*/}
                maxLength={50}
              />
            )}
          </FormItem>
          <FormItem required label={messages('basic-10.key207')/*数据源描述*/}>
            {getFieldDecorator('reportDesc', {
              rules: [InputLanguage.required],
              initialValue: { name: data.reportDesc, i18n: data.i18n ? data.i18n.reportDesc : [] }
            })(
              <InputLanguage
                placeholder={messages('common.max.characters.length',{arg1: 100})/*最多输入{arg1}个字符*/}
                maxLength={100}
              />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator("reportColumnDTOList", {
              initialValue: data.reportColumnDTOList || []
            })(
              <SingleFieldComp onRef={ref=> this.SingleFieldCompRef = ref} />
            )}
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" htmlType="submit" loading={loading}>
              {messages('common.save')/*保存*/}
            </Button>
            <Button onClick={() => {
              this.props.close({needRefresh: false});
            }}>
              {messages('common.cancel')/*取消*/}
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

OtherSourceDataManage.propTypes = {};

export default OtherSourceDataManage;
